<template>
	<view class="container">
		<view class="header-bar flex-row">
            <navigator class="icon-back" open-type="navigateBack"></navigator>
            <input type="text" placeholder="搜索商品名称" />
            <!-- #ifdef H5 || APP-PLUS -->
            <navigator class="icon-search" url="./detail"></navigator>
            <!-- #endif -->
        </view>
        <view class="main-container">
            <view class="hot-container">
                <view class="title">热门搜索</view>
                <image src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/595792fad7d29470726f0765091c323c.jpg?w=1080&h=300&bg=FFFFFF" mode=""></image>
                <view class="list">
                    <view class="item" v-for="(item,index) of [1,2,3,4]" :key="index">小米手环4</view>
                </view>
            </view>
            <view class="common-container">
                <view class="title">常用分类</view>
                <view class="list">
                    <view class="item" v-for="(item,index) of [1,2,3,4,5,6,7,8,9,0]" :key="index">手机</view>
                </view>
            </view>
        </view>
        
	</view>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        
    }
}
</script>

<style lang="stylus" scoped>
    .container
        padding-top calc(var(--status-bar-height) + 82rpx)
        .header-bar
            position fixed
            z-index: 99;
            top var(--status-bar-height)
            width 100%
            // #ifdef MP-WEIXIN
            padding-right: 200rpx;
            box-sizing border-box
            // #endif
            height 82rpx
            background #f2f2f2
            .icon-back
                width 52rpx
                height 52rpx
                background no-repeat center url('')
                background-size 52rpx
                padding 0 21rpx
            input
                flex 1
                height 52rpx
                border: 2rpx solid #e5e5e5;
                background #fff
                border-radius: 40rpx
                padding 0 20rpx
                font-size 30rpx
            .icon-search
                width 62.5rpx
                height 62.5rpx
                background no-repeat center url('')
                background-size 62.5rpx
                padding 0 21rpx
        .main-container
            padding 0 31.2rpx
            .hot-container
                .title
                    padding 20rpx 0
                    font-size 26rpx
                >image
                    width 100%
                    height 208rpx
                    margin-bottom 20rpx
                .list
                    display flex
                    flex-wrap wrap
                    .item
                        padding 14rpx 21rpx
                        font-size 26rpx
                        border: 2rpx solid #e4e4e4
                        margin-right 20rpx
                        margin-bottom 20rpx
                        &:nth-child(2n+1)
                            border-color: rgb(227, 175, 150)
                            background: rgb(250, 232, 232)
                        &:nth-child(2n+2)   
                            border-color: rgb(187, 208, 144);
                            background: rgb(242, 246, 233);
                        &:nth-child(2n+3)
                            border-color: rgb(250, 194, 136);
                            background: rgb(248, 242, 236)
                        &:nth-child(2n+4)   
                            border-color: rgb(252, 160, 167);
                            background: rgb(249, 234, 234);
            .common-container
                .title
                    padding 20rpx 0
                    font-size 26rpx
                .list
                    display flex
                    flex-wrap wrap
                    .item
                        padding 14rpx 18rpx
                        font-size 24rpx
                        background: #f5f5f5;
                        color: rgba(0,0,0,.54);
                        margin-right 14rpx
                        margin-bottom 10rpx
</style>
